<template>
	<div class="spread-user table-theme">
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="roleList"
						:value="admin_role"
						type="admin_role"
						@value="setSelectValue"
						label-name="name"
						value-name="admin_role_id"
					>
					</select-view>
					<select-view
						:option-list="roleTypeList"
						:value="role_type"
						type="role_type"
						@value="setSelectValue"
						label-name="type_name"
						value-name="role_type"
					>
					</select-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<div class="user-search-view">
						<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
					</div>
					<div class="add">
						<el-button type="primary" @click="onOpenDialog" >导出</el-button>
					</div>
					
				</div>
			</div>
			<p class="data-number">总用户数：{{ total }}</p>
			<el-table :data="userList">
				<el-table-column label="用户序号" align="center" prop="user_id"></el-table-column>
				<el-table-column label="头像" align="center" width="100">
					<template slot-scope="scope">
						<el-image :src="scope.row.heard_img" style="width: 50px; height: 50px; vertical-align: top;"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="名字" align="center" prop="nickname"></el-table-column>
				<el-table-column label="电话" align="center" prop="phone"></el-table-column>
				<el-table-column label="角色" align="center" prop="role_name"></el-table-column>
				<el-table-column label="商家ID" align="center" prop="store_id"></el-table-column>
				<el-table-column label="商家名字" align="center" prop="store_name"></el-table-column>
				<el-table-column label="推荐人id" align="center" prop="belong_refer"></el-table-column>
				<el-table-column label="时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="注册端" align="center" prop="client"></el-table-column>
				<el-table-column label="备注" align="center" prop="user_remarks"></el-table-column>
				<el-table-column label="操作" align="center" width="280">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="goFootDetails(scope.row.user_id)">足迹</el-button>
						<el-button type="primary" size="mini" @click="openDialog(scope.row)">备注</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
		<el-dialog title="备注信息" :close-on-click-modal="false" :visible.sync="remarkDialogVisible" center :modal-append-to-body="false" width="480px" @closed="onCloseRemark('upDownForm')">
			<el-form :model="upDownForm" :rules="upDownFormRules" ref="upDownForm" label-width="100px">
				<el-form-item label="备注：" prop="user_remarks">
					<el-input v-model="upDownForm.user_remarks"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="onCloseRemark('upDownForm')">取 消</el-button>
				<el-button type="primary" @click="submitUpDowmForm('upDownForm')">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog
			title="导出提示"
			:visible.sync="isExportShow"
			:close-on-click-modal="false"
			:modal-append-to-body="false"
			center
			width="30%">
			<el-form :model="exportForm" :rules="exportFormRules" label-width="80px">
			  <el-form-item label="页数" prop="page">
				  <el-input v-model.number="exportForm.page" placeholder="请输入页数"></el-input>
			  </el-form-item>
			  <el-form-item label="数条" prop="limit">
				  <el-input v-model="exportForm.limit" placeholder="请输入条数" disabled></el-input>
			  </el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isExportShow = false">取 消</el-button>
				<el-button type="primary" @click="onExport">导出</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import SelectView from "@/components/SelectView";
import footDetails from '@/views/operation/foot_details.vue';
	export default {
		components:{
			SelectView
		},
		props: {
			id: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				role_name: [],
				roleList: [],
				roleTypeList: [],
				role_type: '',
				admin_type: localStorage.getItem('admin_type'),
				admin_id: localStorage.getItem('admin_id'),
				userList: [], // 用户列表
				total: 0,
				totalData: 0,
				admin_role: -1,
				page: 0,
				searchOption: [{
					value: 0,
					label: '用户ID'
				}, {
					value: 1,
					label: '电话'
				}],
				selectContent: '', // 分类搜索平输入框的值
				classSelect: 0, // 分类搜索
				user_id: '', // 用户id
				upDownForm:{
					user_id:'',
					user_remarks:''
				},
				remarkDialogVisible:false,
				upDownFormRules:{
					user_remarks:[{required:true,message:'请输入备注'}]
				},
				isExportShow:false,
				exportForm:{
					page:0,
					limit:1000,
					belong_refer:''
				},
				exportFormRules:{
					page:[{required:true,message:'请输入页数'}],
					limit:[{required:true,message:'请输入条数'}]
				}
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					asc: this.ase,
					is_admin: this.admin_role,
					role_type: this.role_type,
					belong_refer: this.id
				};

				if (this.admin_role == -1) {
					delete data.is_admin
				}

				if (this.admin_type != 1) {
					data.store_id = localStorage.getItem('store_id');
				}

				if (this.classSelect == 0) {
					data.user_id = this.selectContent;
				} else if (this.classSelect == 1) {
					data.phone = this.selectContent;
				}

				this.$http(this.$ApiList.UserList, data).then(res => {
					this.userList = [];
					res.datas.data.forEach(item => {
						let is_admin = item.is_admin;
						this.role_name.forEach(item2 => {
							if (is_admin == item2.admin_role_id) {
								item.role_name = item2.name;
							}
						});
						this.userList.push(item);
					});
					this.total = res.datas.count;
				});
			},

			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			roleType() {
				this.init();
			},
			refreshPage() {
				this.page = 1;
				this.classSelect = "";
				this.admin_role = -1;
				this.selectText = '';
				this.selectContent = '';
				this.init()
			},
			getRole() {
				this.$http(this.$ApiList.RoleList).then(res => {
					this.role_name = res.datas;
					if (this.admin_id == 2) {
						this.roleList = [{
								admin_role_id: -1,
								name: '所有用户'
							},
							{
								admin_role_id: 0,
								name: '普通用户'
							},
							{
								admin_role_id: 14,
								name: '商家业务员'
							},
							{
								admin_role_id: 15,
								name: '商家分销'
							},
							{
								admin_role_id: 16,
								name: '商家财务'
							}
						];
						this.searchOption = [{
							value: 0,
							label: '用户ID'
						}, {
							value: 1,
							label: '电话'
						}];
						this.role_name.unshift({
							admin_role_id: 0,
							name: '普通用户'
						});
					} else if (this.admin_type == 1 || this.admin_type == 4) {
						this.roleList = res.datas;
						this.roleList.splice(0, 1)
						this.roleList.unshift({
							admin_role_id: 0,
							name: '普通用户'
						});
						this.roleList.unshift({
							admin_role_id: -1,
							name: '所有用户'
						});
					}
				});

				this.$http(this.$ApiList.RoleTypeList).then(res => {
					this.roleTypeList = res.datas
					this.roleTypeList.unshift({
						role_type: '',
						type_name: '所有身份'
					});
				});
			},
			// 查看用户足迹
			goFootDetails(id) {
				if(this.id != 0){
					this.$layer.iframe({
					title: '足迹详情',
					maxmin: true,
					area: ['70%', '70%'],
					content: {
						content: footDetails, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							id: id
						} //props
					}
				});
				}else{
					this.$router.push({
					path: '/foot_details',
					query: {
						id: id
					}
				});
				}
				
			},
			// 返回
			goBack() {
				this.$router.go(-1);
			},
			openDialog(row){
				const { user_id,user_remarks } = row
				this.upDownForm.user_id = user_id
				this.upDownForm.user_remarks = user_remarks
				this.remarkDialogVisible = true
			},
			submitUpDowmForm(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$http(this.$ApiList.AddRemark, this.upDownForm).then(res => {
							this.onCloseRemark('upDownForm');
							this.$layer.msg('操作成功');
							this.init(this.page);
						})
					}
				});
			},
			onCloseRemark(formName){
				this.remarkDialogVisible = false;
				this.upDownForm.user_id = ''
				this.$refs[formName].resetFields()
			},
			setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'admin_role':
						this.admin_role = value
						break;
					case 'role_type':
						this.role_type = value
						break;
					default:
						break;
				}
				this.init()
			},
			onOpenDialog(){
				this.isExportShow = true
				this.exportForm.belong_refer = this.id
			},
			onExport(){
				const { belong_refer,page,limit } = this.exportForm
				let url = `${this.$domain}furniture/Adminexcel/GetExtensionUserDataExcel?secret=888&belong_refer=${belong_refer}&limit=${limit}&page=${page}`
				window.location.href = url
			}
		},
		created() {
			this.getRole();
			this.init();
		}
	};
</script>
<style lang="scss" scoped>
	.spread-user {
		padding: 10px;
		width: 100%;
	}
</style>
